<!--  -->
<template>
  <div>
    <ul
      id="navbar"
      class="listlong"
      :class="
        (type === 'list' ? 'list-page-long' : '',
        navBarFixed == true ? 'fixed_nav_padding' : '')
      "
    >
      <li
        class="li-single"
        v-for="(v, index) in navList"
        :key="v.activityTagNo"
        :class="activeIndex == index ? 'active' : ''"
        @click="select(v, index)"
      >
        {{ v.activityTagName }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'navBar',
  props: {
    type: {
      type: String,
      default: 'index'
    },
    navList: {
      type: Array,
      default: () => []
    },
    curIndex: {
      type: [Number, String],
      default: 0
    },
    navBarFixed: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      activeIndex: 0
    };
  },
  created() {
    this.activeIndex = this.curIndex;
  },
  mounted() {},
  computed: {},
  watch: {
    curIndex(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal !== oldVal) {
        this.activeIndex = newVal;
      }
    }
  },
  methods: {
    select(v, index) {
      this.activeIndex = index;
      const anchor = document.querySelector(`#anchor-${v.activityTagNo}`)
        ? document.querySelector(`#anchor-${v.activityTagNo}`)
        : 0;
      window.scroll(0, anchor.offsetTop - 40);
    }
  }
};
</script>
<style lang="scss" scoped>
.fixed_nav_padding {
  position: fixed;
  top: 0;
  z-index: 999;
}
.listlong {
  background: #fff;
  color: #666;
  font-size: 15px;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 2px;
  height: 40px;
  line-height: 40px;
  &.list-page-long {
    background: #e62525;
    li {
      &.active {
        color: #fff;
        &:after {
          content: '';
          display: block;
          width: 16px;
          height: 5px;
          margin: -10px auto 0;
          background: url('../../../../assets/promotion/white_active.png')
            no-repeat left center / 16px 5px;
        }
      }
    }
  }
  li {
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    display: inline-block;
    &.active {
      color: #e62525;
      &:after {
        content: '';
        display: block;
        width: 16px;
        height: 5px;
        margin: -10px auto 0;
        background: url('../../../../assets/promotion/nav_active.png') no-repeat
          left center / 16px 5px;
      }
    }
    img {
      width: 0.48rem;
      height: 0.48rem;
      float: left;
      margin-right: 0.08rem;
    }
    span {
      float: left;
    }
  }
}
</style>
